<template>
  <div class="table2">
    <a-form :label-col="{ span: 5 }" :label-width="300">
      <a-form-item :label="item.title" v-for="(item, index) in configList" :key="item.id">
        <a-radio-group
          :defaultValue="item.value.toString()"
          type="button"
          v-if="item.type === 'radio'"
          @change="onRadioChange($event, item.code)"
        >
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
        <div v-else-if="item.type === 'text'" class="flex">
          <template v-if="typeof item.value === 'string'">
            <a-input v-model="item.value" placeholder="请输入" :disabled="!item.mobileEdit" @input="onInputChange" />
          </template>
          <template v-else>
            <a-input-number
              v-model="item.value"
              placeholder="请输入"
              :disabled="!item.mobileEdit"
              :min="0"
              @input="onInputChange"
            />
          </template>
          <a-button
            type="primary"
            size="small"
            class="ml-10"
            @click="onEditStatus(index, true)"
            v-show="!item.mobileEdit"
            >修改</a-button
          >
          <a-button type="primary" size="small" class="ml-10" @click="onEdit(index, item.code)" v-show="item.mobileEdit"
            >确认修改</a-button
          >
          <a-button
            size="small"
            class="ml-10"
            v-if="item.mobileEdit"
            @click="onEditStatus(index, false)"
            v-show="item.mobileEdit"
          >
            取消修改
          </a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { adminConfigList, adminConfigEdit } from '@/apis'

defineOptions({ name: 'buyerCircleHotSelling' })

const loading = ref(false)
const configList = ref([])
const submitData = reactive({})
const inputValue = ref('')
const inputValueCopy = ref('')

const getAdminConfigList = async () => {
  try {
    loading.value = true
    const res = await adminConfigList()
    configList.value = res.data.list.map((item) => {
      submitData[item.code] = item.value
      return {
        ...item,
        mobileEdit: item.type !== 'text'
      }
    })
  } finally {
    loading.value = false
  }
}
getAdminConfigList()

// 单选框值改变
const onRadioChange = async (value, code) => {
  await adminConfigEdit({ value, code })
  getAdminConfigList()
  Message.success('修改成功')
}

const onEditStatus = (index, value) => {
  configList.value[index].mobileEdit = value
  if (value) {
    inputValueCopy.value = configList.value[index].value
  } else {
    configList.value[index].value = inputValueCopy.value
    inputValue.value = ''
    inputValueCopy.value = ''
  }
}

// 输入框值改变
const onInputChange = (value) => {
  inputValue.value = value
}

// 修改输入框的值
const onEdit = async (index, code) => {
  if (!inputValue.value) {
    return Message.warning('请输入有效值')
  }
  await adminConfigEdit({ code, value: inputValue.value })
  configList.value[index].value = inputValue.value
  inputValue.value = ''
  inputValueCopy.value = ''
  configList.value[index].mobileEdit = false
  Message.success('修改成功')
}
</script>

<style lang="scss" scoped>
.table2 {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
